<template>
	<view class="container-bg">
		<up-navbar placeholder :safeAreaInsetTop="false">
			<template #left>
				<view class="navbar-left">
					聊天
				</view>
			</template>
			<template #right>
				<view class="physical font-28 pad-left-50 color-light-black">
					32/80
				</view>
			</template>
		</up-navbar>

		<view class="list-box pad-top-50 pad-32">
			<view class="font-w-600 font-36 mar-bottom-32">机器人</view>
			<view class="list centerY betweenX mar-bottom-48">
				<view class="centerY">
					<image class="avatar" src="../../static/images/list5.png"></image>
					<view class="mar-left-32 font-36 font-w-600">MagicAnimate</view>
					<image class="set mar-left-5" src="../../static/images/set.png"></image>
				</view>
				<view class="color-grey font-28">13:23</view>
			</view>
			<view class="list centerY betweenX mar-bottom-48" @click="hanldeChat">
				<view class="centerY">
					<image class="avatar" src="../../static/images/list5.png"></image>
					<view class="mar-left-32 font-36 font-w-600">图文生成</view>
					<image class="set mar-left-5" src="../../static/images/set.png"></image>
				</view>
				<view class="color-grey font-28">13:23</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const hanldeChat = () => {
		uni.navigateTo({
			url: '/pages/chat/chat'
		})
	}
</script>

<style scoped>
	.physical {
		width: 138rpx;
		height: 48rpx;
		background-image: url('../../static/images/group.png');
		background-size: cover;
		background-repeat: no-repeat;
		line-height: 48rpx;
	}

	.avatar {
		display: block;
		width: 112rpx;
		height: 112rpx;
		border-radius: 16rpx;
	}

	.set {
		display: block;
		width: 36rpx;
		height: 36rpx;
	}

	.container-bg {
		background: url('@/static/images/top-bg.png') no-repeat;
		background-size: 100% 330rpx;
		width: 751rpx;

		::v-deep .u-navbar__content {
			background-image: url('@/static/images/top-bg.png');
			background-size: cover;
			background-repeat: no-repeat;
			background-color: #f5f5f5;
		}
	}
</style>